<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>分卷优化模型</h1>
      </div>
    </div>
    <div class="common-layout linear-gradient">
      <el-container style="margin-right: -6vh">
        <el-header>
          <div class="top">
            <el-form :model="headerSearchForm" label-width="auto" class="header-search-form" :inline="true">
              <el-form-item label="产线">
                <el-select v-model="headerSearchForm.productionLine" style="min-width: 160px" class="select">
                  <el-option v-for="item in productionLineOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围">
                <el-tooltip effect="dark" content="日/月的数据范围为上一天/上一月" placement="top-start">
                  <el-select v-model="headerSearchForm.dateType" placeholder="时间范围" style="min-width: 160px" class="select">
                    <el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="开始时间" v-if="headerSearchForm.dateType === '2'" class="time-period-picker">
                <el-date-picker
                  v-model="headerSearchForm.startTime"
                  type="date"
                  placeholder="开始时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="min-width: 200px"
                />
              </el-form-item>
              <el-form-item label="结束时间" v-if="headerSearchForm.dateType === '2'" class="time-period-picker">
                <el-date-picker
                  v-model="headerSearchForm.endTime"
                  type="date"
                  placeholder="结束时间"
                  value-format="YYYY-MM-DD 23:59:59"
                  style="min-width: 200px"
                />
              </el-form-item>
              <div class="form-btns">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
              </div>
            </el-form>
          </div>
        </el-header>
        <el-main class="main-container">
          <el-row>
            <div class="card-container">
              <el-card>
                <div class="inputSteel">
                  <el-input
                    v-model="inputSteel"
                    placeholder="请输入钢种"
                    style="max-width: 12rem"
                    class="filterInput inputPosition"
                    @input="fetchResource()"
                  />
                </div>
                <div
                  class="card-body loading-map"
                  v-loading="fetchLoading"
                  element-loading-text="数据加载中..."
                  element-loading-background="transparent"
                >
                  <el-tabs v-model="activeTab" class="card-tabs" @tab-click="handleTabClick">
                    <el-tab-pane label="规格 × 钢种损失重量" name="loss">
                      <div class="table-container">
                        <el-table
                          size="small"
                          :data="
                            inputSteel
                              ? specificationTableData?.filter(
                                  (item: any) =>
                                    item.steelGrade == inputSteel ||
                                    item.steelGrade.includes(inputSteel) ||
                                    item.steelGrade.toLowerCase().includes(inputSteel.toLowerCase())
                                )
                              : specificationTableData
                          "
                          style="width: 100%"
                          @row-dblclick="selectRow"
                          @row-click="getDefectData"
                          :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center' }"
                          :cell-style="{ color: '#fff', textAlign: 'center', height: '3vh' }"
                          ref="speTableRef"
                          highlight-current-row
                        >
                          <el-table-column prop="steelGrade" label="钢种" />
                          <el-table-column prop="thkClass" label="规格(厚度)" sortable />
                          <el-table-column prop="widClass" label="规格(宽度)" sortable />
                          <el-table-column prop="lossRatio" label="损失比" sortable :sort-method="scoreLossRatio">
                            <template #default="scope">
                              {{ scope.row.lossRatio + '%' }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="lossWeight" label="损失重量[t]" sortable :sort-method="scoreLossWeight" />
                          <el-table-column prop="totalWeight" label="总重量[t]" sortable :sort-method="scoreTotalWeight" />
                        </el-table>
                      </div>
                      <div class="graph-container">
                        <graph-pie :data="specificationGraphData"></graph-pie>
                        <div class="msg-title">分卷优化建议</div>
                        <div class="information">
                          <typing-text v-if="steelAdvice" :text="steelAdvice" style="height: 100%" />
                          <span v-else v-loading="textLoading"></span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="原料重量优化" name="resource">
                      <div class="resource-table-container">
                        <el-table
                          size="small"
                          :data="
                            inputSteel
                              ? resourceTableData?.filter(
                                  (item: any) =>
                                    item.steelGrade == inputSteel ||
                                    item.steelGrade.includes(inputSteel) ||
                                    item.steelGrade.toLowerCase().includes(inputSteel.toLowerCase())
                                )
                              : resourceTableData
                          "
                          style="width: 100%"
                          :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center', fontSize: '8px' }"
                          :cell-style="{ color: '#fff', textAlign: 'center', height: '3vh' }"
                          :row-class-name="rowClassName"
                          ref="resourceTableRef"
                          :show-overflow-tooltip="true"
                          @row-click="resouceClick"
                          highlight-current-row
                        >
                          <el-table-column prop="steelGrade" label="钢种" min-width="140" />
                          <el-table-column prop="thkClass" label="规格(厚度)" min-width="140" sortable />
                          <el-table-column prop="widClass" label="规格(宽度)" min-width="140" sortable />
                          <el-table-column prop="orderwtMinMax" label="订单重量范围" min-width="170" />
                          <el-table-column prop="avgYield" label="成材率" min-width="140" sortable />
                          <el-table-column prop="materialMinWeight" label="来料最小重量[t]" min-width="170" sortable />
                          <el-table-column prop="materialMaxWeight" label="来料最大重量[t]" min-width="170" sortable />
                          <el-table-column prop="avgCoilRecords" label="历史分卷数" min-width="140" sortable />
                        </el-table>
                      </div>
                      <div class="pagination" style="width: 100%; display: flex; justify-content: center; margin-top: 20px">
                        <el-pagination
                          v-model:current-page="pagination.currentPage"
                          v-model:page-size="pagination.pageSize"
                          :page-sizes="[10, 20, 50]"
                          :total="pagination.total"
                          layout="total, sizes, prev, pager, next, jumper"
                          background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          size="small"
                        />
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-card>
            </div>
            <div class="card-container" style="margin-left: 20px">
              <el-card>
                <!-- <div class="inputSteel">
                  <el-input v-model="inputReason" placeholder="请输入缺陷原因" style="max-width: 12rem" class="filterInput inputPosition" />
                </div> -->
                <div class="card-body" v-loading="defectLoading" element-loading-text="数据加载中..." element-loading-background="transparent">
                  <el-tabs v-model="defectActiveTab" class="card-tabs" @tab-click="handleSubTabClick">
                    <el-tab-pane label="缺陷原因损失重量" name="defect">
                      <div class="table-container">
                        <el-table
                          size="small"
                          :data="
                            inputReason
                              ? reasonTableData?.filter(
                                  (item: any) =>
                                    item.defectReason == inputReason ||
                                    item.defectReason.includes(inputReason) ||
                                    item.defectReason.toLowerCase().includes(inputReason.toLowerCase())
                                )
                              : reasonTableData
                          "
                          style="width: 100%"
                          :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center' }"
                          :cell-style="{ color: '#fff', textAlign: 'center', height: '3vh' }"
                          ref="reasonTableRef"
                        >
                          <el-table-column prop="defectReason" label="缺陷原因" />
                          <!-- <el-table-column prop="defectReasonCode" label="缺陷代码" /> -->
                          <!-- sortable :sort-method="scoreLossRatio"  -->
                          <el-table-column prop="lossRatio" label="损失比" />
                          <!-- sortable :sort-method="scoreLossWeight"   -->
                          <el-table-column prop="lossWeight" label="损失重量[t]" />
                          <!-- sortable :sort-method="scoreTotalWeight"  -->
                          <el-table-column prop="totalWeight" label="总重量[t]" />
                        </el-table>
                      </div>
                      <div class="graph-container">
                        <graph-pie :data="reasonGraphData"></graph-pie>
                        <div class="msg-title">分卷优化建议</div>
                        <div class="information">
                          <typing-text v-if="defectAdvice" :text="defectAdvice" style="height: 100%" />
                          <span v-else v-loading="textLoading"></span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="原料重量优化详细" name="resourceDetail">
                      <div class="table-container">
                        <el-table
                          size="small"
                          :data="resourceDetail"
                          style="width: 100%"
                          :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center' }"
                          :cell-style="{ color: '#fff', textAlign: 'center', height: '3vh' }"
                          ref="reasonTableRef"
                        >
                          <el-table-column prop="fullLossCount" label="未达到卷重数量" />
                          <el-table-column prop="partialLossCount" label="超出卷重数量" />
                          <el-table-column prop="fullLossRatio" label="未达到卷重数量占比(%)">
                            <template #default="{ row }">
                              {{ row.fullLossRatio || row.fullLossRatio == 0 ? row.fullLossRatio + '%' : row.fullLossRatio }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="partialLossRatio" label="超出卷重数量占比(%)">
                            <template #default="{ row }">
                              {{ row.partialLossRatio || row.partialLossRatio == 0 ? row.partialLossRatio + '%' : row.partialLossRatio }}
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-card>
            </div>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage, ElTable, TabsPaneContext } from 'element-plus';
  import GraphPie from './GraphPie.vue';
  import { api } from '/@/api/VolumeDivisionOptimization/index';
  import * as XLSX from 'xlsx';
  import { useUserStore } from '/@/store/modules/system/user';
  import { useRouter } from 'vue-router';
  import TypingText from './TypingText.vue';
  import { debounce } from 'lodash';
  import dayjs from 'dayjs';

  // 下拉框选项
  const dateTypeOptions = ref([
    { value: '0', label: '日' },
    { value: '1', label: '月' },
    { value: '2', label: '时间范围' },
  ]);

  // 下拉框选项
  const productionLineOptions = ref([
    { value: 'CAL2150', label: '2#连退' }, // CAL2150连退
    { value: 'CAL1630', label: '3#连退' }, // CAL1630连退
    { value: 'TCM2280', label: '3#酸轧' }, // TCM2280酸轧
    { value: 'CGL1870', label: '5#镀锌' }, // CGL1870镀锌
    { value: 'RCL2150', label: '4#重卷' }, // CAL2150重卷
    { value: 'RCL1630', label: '5#重卷' }, // CAL1630重卷
    { value: 'RCL1870', label: '6#重卷' }, // CGL1870重卷
  ]);

  const errResource = '无法达到来料重量要求';

  const rowClassName = ({ row }: { row: any }) => {
    const hasWarning = row.materialMaxWeight == errResource || row.materialMinWeight == errResource;
    return hasWarning ? 'warning-row' : '';
  };

  // const productionLineOption = ref('0');
  // const dateTypeOption = ref('0');

  const headerSearchForm = reactive({
    productionLine: '',
    dateType: '2',
    startTime: '',
    endTime: '',
  });

  const inputSteel = ref('');
  const inputReason = ref('');
  const fetchLoading = ref(false);
  const defectLoading = ref(false);
  const steelAdvice = ref('');
  const defectAdvice = ref('');
  const textLoading = ref(false);
  const activeTab = ref<'loss' | 'resource'>('loss');
  const defectActiveTab = ref<'defect' | 'resourceDetail'>('defect');

  const speTableRef = ref<InstanceType<typeof ElTable>>();
  const reasonTableRef = ref<InstanceType<typeof ElTable>>();
  const resourceTableRef = ref<InstanceType<typeof ElTable>>();

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchResource();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchResource();
  };

  const specificationGraphData = ref<any>([]);

  const reasonGraphData = ref<any>([]);

  const specificationTableData = ref<any>([]);

  const reasonTableData = ref<any>([]);

  const resourceTableData = ref<any>([]);

  const resourceDetail = ref<any>([]);

  const handleTabClick = (tab: TabsPaneContext, event: Event) => {
    if (tab.paneName == 'resource') {
      defectActiveTab.value = 'resourceDetail';
      fetchResource();
    } else if (tab.paneName == 'loss') {
      defectActiveTab.value = 'defect';
    }
  };

  const handleSubTabClick = (tab: TabsPaneContext, event: Event) => {
    if (tab.paneName == 'resourceDetail') {
      activeTab.value = 'resource';
      fetchResource();
    } else if (tab.paneName == 'defect') {
      activeTab.value = 'loss';
    }
  };

  const findResource = async () => {
    try {
      const param = {
        page: {
          pageIndex: pagination.currentPage,
          pageSize: pagination.pageSize,
        },
        dto: {
          lineCode: headerSearchForm.productionLine,
          timeType: headerSearchForm.dateType,
          steelGrade: inputSteel.value,
          startDate: headerSearchForm.startTime,
          endDate: headerSearchForm.endTime,
        },
      };
      const res = await api.getResource(param);
      resourceTableData.value = res.data.data.records.map((item: any) => {
        item.avgYield = (item.avgYield * 100).toFixed(2) + '%';
        item.materialMaxWeight = item.materialMaxWeight == 0 ? errResource : item.materialMaxWeight;
        item.materialMinWeight = item.materialMinWeight == 0 ? errResource : item.materialMinWeight;
        return item;
      });
      resourceDetail.value = resourceTableData.value.length > 0 ? [resourceTableData.value[0]] : [];
      pagination.total = res.data.data.total;
      if (res.data.status == 2002) {
        console.error('获取来料数据失败：' + res.data.msg);
      }
    } catch (error: any) {
      console.error('获取数据失败');
    }
  };

  const fetchResource = debounce(async () => {
    if (activeTab.value == 'loss') {
      return;
    }
    findResource();
  }, 500);

  const fetchData = async () => {
    fetchLoading.value = true;
    try {
      const speParam: any = {
        lineCode: headerSearchForm.productionLine,
        startDate: headerSearchForm.startTime,
        endDate: headerSearchForm.endTime,
        timeType: headerSearchForm.dateType,
      };
      const speData = await api
        .getSpeData(speParam)
        .then((res) => {
          speParam.trackIndocnos = '';
          detailDefect(speParam);
          return res.data.data;
        })
        .catch((err) => {
          console.error('钢种规格数据获取失败：' + err);
        });
      specificationTableData.value = speData;
      findResource();
      const speDesc = [...specificationTableData.value].sort((a: any, b: any) => b.lossRatio - a.lossRatio);
      specificationGraphData.value = [
        speDesc?.slice(0, 10).map((item, index) => {
          if (index < 9) {
            return { name: item.steelGrade + '/' + item.widClass + '/' + item.thkClass, value: item.lossRatio };
          } else {
            return { name: '其他', value: Number(item.lossRatio) };
          }
        }),
      ];
      // specificationTableData.value = specificationTableData.value.map((item: any) => {
      //   return {
      //     ...item,
      //     lossRatio: item.lossRatio ? item.lossRatio + '%' : item.lossRatio,
      //   };
      // });
    } catch (error: any) {
      ElMessage.error('获取数据失败');
    } finally {
      fetchLoading.value = false;
    }
  };

  // 通用排序函数
  const scoreSort = (row1: any, row2: any, key: string) => {
    const val1 = Number(row1[key]);
    const val2 = Number(row2[key]);

    // 检查是否转换成功
    if (isNaN(val1) || isNaN(val2)) {
      ElMessage.error(`排序时无法将 ${key} 转换为数字`);
      return 0;
    }

    // 自定义排序逻辑
    if (val1 < val2) {
      return -1;
    }
    if (val1 > val2) {
      return 1;
    }
    // 相同则返回0，表示不变
    return 0;
  };

  // 损失比排序
  const scoreLossRatio = (row1: any, row2: any) => {
    return scoreSort(row1, row2, 'lossRatio');
  };

  // 损失重量排序
  const scoreLossWeight = (row1: any, row2: any) => {
    return scoreSort(row1, row2, 'lossWeight');
  };

  // 总重量排序
  const scoreTotalWeight = (row1: any, row2: any) => {
    return scoreSort(row1, row2, 'totalWeight');
  };

  // 查询方法
  const handleSearch = () => {
    if (headerSearchForm.startTime > headerSearchForm.endTime) {
      ElMessage.error('开始时间不能大于结束时间');
      return;
    }
    fetchData();
  };

  const router = useRouter();
  const selectRow = (row: any) => {
    router.push({
      path: '/yiledAndSubsection/DefectYieldAnalysis',
      query: {
        trackIndocnos: row.trackIndocnos,
      },
    });
  };

  const getDefectData = (row: any) => {
    const speParam: any = {
      lineCode: headerSearchForm.productionLine,
      startDate: headerSearchForm.startTime,
      endDate: headerSearchForm.endTime,
      timeType: headerSearchForm.dateType,
      trackIndocnos: row.trackIndocnos,
    };
    detailDefect(speParam);
    defectActiveTab.value = 'defect';
  };

  const resouceClick = (row: any) => {
    defectActiveTab.value = 'resourceDetail';
    resourceDetail.value = [row];
  };

  const detailDefect = async (param: any) => {
    if (!param) {
      ElMessage.error('查询条件不足');
    }
    defectLoading.value = true;
    try {
      let defectParam = { ...param };
      const defectRes = await api.getDefectData(defectParam);
      reasonTableData.value = defectRes.data.data.resultList;
      if (defectRes.data.status == 2002) {
        console.error('获取缺陷数据失败：' + defectRes.data.msg);
      }
      const reasonDesc = [...reasonTableData.value].sort((a: any, b: any) => b.lossRatio - a.lossRatio);
      reasonGraphData.value = [
        reasonDesc?.slice(0, 10).map((item, index) => {
          if (index < 9) {
            return { name: item.defectReason, value: item.lossRatio };
          } else {
            return { name: '其他', value: Number(item.lossRatio) };
          }
        }),
      ];
      reasonTableData.value = reasonTableData.value.map((item: any) => {
        return {
          ...item,
          lossRatio: item.lossRatio ? item.lossRatio + '%' : item.lossRatio,
        };
      });
      defectLoading.value = false;

      textLoading.value = true;
      setTimeout(() => {
        steelAdvice.value = defectRes.data.data.leftSplitSuggestion;
        defectAdvice.value = defectRes.data.data.rightSplitSuggestion;
        textLoading.value = false;
      }, 1000);
    } catch (error: any) {
      defectLoading.value = false;
      ElMessage.error('获取缺陷原因数据失败');
    }
  };

  // 查询方法
  const handleExport = () => {
    if (!specificationTableData.value?.length || !reasonTableData.value?.length) return;

    try {
      // 动态获取表格列配置
      const speColumns = speTableRef.value?.columns;
      const reasonColumns = reasonTableRef.value?.columns;
      const resourceColumns = resourceTableRef.value?.columns;

      if (!speColumns || !(Array.isArray(speColumns) && speColumns.length)) {
        throw new Error('无法获取表格列配置-钢种规格');
      }
      if (!reasonColumns || !(Array.isArray(reasonColumns) && reasonColumns.length)) {
        throw new Error('无法获取表格列配置-缺陷原因损失重量');
      }
      if (!resourceColumns || !(Array.isArray(resourceColumns) && resourceColumns.length)) {
        throw new Error('无法获取表格列配置-原料重量优化');
      }

      // 添加新的属性到 headerMap
      const headerMapSpe: Record<string, string> = {};
      const headerMapReason: Record<string, string> = {};
      const headerMapResource: Record<string, string> = {};

      // 构建字段到标签的映射
      speColumns.forEach((column: any) => {
        if (column.property) {
          headerMapSpe[column.property] = column.label;
        }
      });
      reasonColumns.forEach((column: any) => {
        if (column.property) {
          headerMapReason[column.property] = column.label;
        }
      });
      resourceColumns.forEach((column: any) => {
        if (column.property) {
          headerMapResource[column.property] = column.label;
        }
      });

      // 构建字段名数组
      const columnPropertiesSpe = Object.keys(headerMapSpe);
      const columnPropertiesReason = Object.keys(headerMapReason);
      const columnPropertiesResource = Object.keys(headerMapResource);

      // 过滤 specificationTableData 中的数据
      const filteredSpecificationTableData = specificationTableData.value.map((item: any) => {
        const filteredItem: any = {};
        columnPropertiesSpe.forEach((key) => {
          if (item[key] !== undefined) {
            filteredItem[key] = item[key];
          }
        });
        return filteredItem;
      });

      // 过滤 reasonTableData 中的数据
      const filteredReasonTableData = reasonTableData.value.map((item: any) => {
        const filteredItem: any = {};
        columnPropertiesReason.forEach((key) => {
          if (item[key] !== undefined) {
            filteredItem[key] = item[key];
          }
        });
        return filteredItem;
      });

      // 过滤 resourceTableData 中的数据
      const filteredResourceTableData = resourceTableData.value.map((item: any) => {
        const filteredItem: any = {};
        columnPropertiesResource.forEach((key) => {
          if (item[key] !== undefined) {
            filteredItem[key] = item[key];
          }
        });
        return filteredItem;
      });
      const ws1 = XLSX.utils.json_to_sheet(filteredSpecificationTableData, { header: columnPropertiesSpe });
      const ws2 = XLSX.utils.json_to_sheet(filteredReasonTableData, { header: columnPropertiesReason });
      const ws3 = XLSX.utils.json_to_sheet(filteredResourceTableData, { header: columnPropertiesResource });

      // 添加中文表头
      const headerRowSpe = Object.values(headerMapSpe);
      XLSX.utils.sheet_add_aoa(ws1, [headerRowSpe], { origin: 'A1' });
      const headerRowReason = Object.values(headerMapReason);
      XLSX.utils.sheet_add_aoa(ws2, [headerRowReason], { origin: 'A1' });
      const headerRowResource = Object.values(headerMapResource);
      XLSX.utils.sheet_add_aoa(ws3, [headerRowResource], { origin: 'A1' });

      // 创建 workbook 并添加 worksheet
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws1, '规格 × 钢种');
      XLSX.utils.book_append_sheet(wb, ws2, '缺陷原因');
      XLSX.utils.book_append_sheet(wb, ws3, '原料重量优化');

      // 格式化日期和时间
      const formattedDateTime = new Date()
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
        .replace(/\s/g, '_')
        .replace(/:/g, '-');

      // 生成 Excel 文件并下载
      XLSX.writeFile(wb, '分卷优化统计_' + formattedDateTime + '.xlsx');
    } catch (error: any) {
      ElMessage.error('导出Excel失败: ' + error.message);
      console.error('导出Excel时出错:', error);
    }
  };
  // 格式化时间
  function formatUTC() {
    headerSearchForm.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00');
    headerSearchForm.endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59');
  }
  const menuData = ref([
    { menuName: 'volumeDivisionOptimizations', menuTitle: '历史卷重不符统计及优化建议', menuId: '1' },
    { menuName: 'volumeDivisionOptimizationList', menuTitle: '生产计划-动态分切建议' },
    { menuName: 'DefectYieldAnalysis', menuTitle: '全流程重量不符追溯分析' },
    { menuName: 'coilSplittingAnalysis', menuTitle: '单产线分卷分析画面' },
  ]);
  onBeforeMount(() => {
    useUserStore().setTagNav(menuData.value);
  });
  onMounted(() => {
    formatUTC();
    fetchData();
  });
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 4px rgba(51, 102, 153, 0.5);

  .home {
    height: 100vh;
    overflow: hidden !important;
  }

  .common-layout {
    width: 99vw;
  }
  .top {
    width: 98%;
    height: 18vh;
    margin: 0.5% auto;
    margin-left: -3vh;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    .header-search-form {
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      z-index: 1;
      margin: 0.5% auto;
      justify-content: space-between;

      :deep(.el-form-item__label) {
        color: #fff !important;
      }
    }
  }

  .main-container {
    width: 98%;
    height: 100%;
    flex-wrap: wrap;
    overflow: hidden;
    // margin-top: -0.5vh;
    // display: flex;
    // justify-content: space-between;
    // gap: 20px;
  }

  .main-container .card-container {
    // margin-top: 2vh;
    width: 49%;
    border-radius: @border-radius;
    height: 76vh;
    background-color: transparent !important;
    box-shadow: @box-shadow;
    transition: box-shadow 0.3s ease;
    color: #fff;
    display: flex;
    justify-content: space-between;
    position: relative;

    .card-header {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      // .select-container {
      //   color: #fff;
      //   display: flex;
      //   align-items: center;
      //   gap: 1vw;
      // }

      .card-title {
        background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2vh;
        font-weight: bolder;
      }
    }

    :deep(.el-select) {
      width: 1rem;
      right: 1rem;
      color: #fff;
      background-color: transparent !important;
    }

    :deep(.el-select__wrapper) {
      color: #fff;
      background-color: transparent !important;
    }

    :deep(.el-card) {
      width: 100%;
      height: 100%;
      background-color: transparent !important;
      border-radius: @border-radius;
      border: #0072ff solid 2px;
    }

    .card-body {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      // max-height: 50vh;
      // max-width: 45vw;
      // position: absolute;

      .graph-container {
        height: 20vh;
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .table-container {
        height: 45vh;
        width: 100%;
        overflow: hidden;

        :deep(.el-table) {
          height: 40vh;
          overflow: hidden;
          overflow-y: auto;
          width: 100%;
          z-index: 1;
          // --el-table-row-hover-bg-color: unset;
          // --el-table-border-color: transparent;
        }
      }
    }
  }

  .card-container:hover {
    box-shadow: 0 8px 16px rgba(51, 102, 153, 1);
  }

  .msg-title {
    // margin-top: -8vh;
    // margin-left: -0.7%;
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
  }

  .information {
    // margin-left: -6vw;
    // margin-top: -4vh;
    color: #fff;
    width: 100%;
    // height: 10vh;
    border: 2px solid #3981d9;
    border-radius: 5px;
    padding: 0 0.2vw;
    display: flex;
    text-align: center;
    justify-content: center;
  }

  .form-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    padding: 0 0 0 0;
    width: 100%;
    gap: 5px;
  }
  .form-btns .el-button {
    font-size: 15px;
    padding: 6px 32px;
    height: 36px;
    background-image: linear-gradient(90deg, #3a8dde 0%, #2c69e8 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(44, 105, 232, 0.08);
    margin-left: 0;
  }
  .form-btns .el-button:hover {
    background-image: linear-gradient(90deg, #2c69e8 0%, #3a8dde 100%) !important;
    box-shadow: 0 4px 16px rgba(44, 105, 232, 0.18);
  }

  /* 表格 */

  /**>uncoiler_elTableContainer*/
  .uncoiler_elTableContainer {
    margin-right: 0.5vw;
  }

  .uncoiler_elTableContainer .el-table {
    --el-table-border-color: transparent;
  }

  .el-table {
    flex: 1; /* 填充剩余空间 */
    display: flex;
    flex-direction: column;
  }

  :deep(.el-table) {
    color: white;
    --el-table-border: none;
    --el-table-row-hover-bg-color: rgba(51, 126, 204, 0.2);
    --el-table-border-color: transparent;
    --el-table-current-row-bg-color: rgba(51, 126, 204, 0.6);
    --el-table-current-row-hover-bg-color: rgba(51, 126, 204, 0.2);

    background-color: transparent !important;

    :deep(.el-table__row:nth-child(odd)) {
      background-color: #223671;
    }

    .el-table__row {
      height: auto !important;
      line-height: 1.2;
    }
    .el-table__cell {
      padding: 2px 4px !important; // 横向纵向同时压缩
      .cell {
        font-size: 16px !important;
        transform: scale(0.85); // 字体缩放
        transform-origin: left; // 防止内容偏移
        white-space: nowrap; // 禁止换行
        // overflow: hidden;
        text-overflow: ellipsis; // 溢出显示...
      }
    }
    el-table__header-wrapper,
    .el-table__body-wrapper {
      min-width: 100% !important;
      width: auto !important;
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }

  :deep(.common_table .el-table__row:nth-child(odd)) {
    background-color: #223671;
  }

  .time-period-picker :deep(.el-input__wrapper) {
    background-color: transparent !important;
  }

  .time-period-picker :deep(.el-input__inner) {
    color: #fff;
  }

  .time-period-picker :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 0.06rem rgba(255, 255, 255, 0.9) inset;
  }

  .time-period-picker :deep(.el-input__prefix) {
    color: #fff;
  }

  .filterInput :deep(.el-input__inner) {
    color: #fff;
  }

  .select :deep(.el-select__inner) {
    color: #fff;
  }

  .select :deep(.el-select__selected-item) {
    color: #fff;
  }

  :deep(.el-input__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-select__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  }

  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  }

  :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    background: #0b3571;
  }

  :deep(.el-select .el-input__wrapper) {
    background: #0b3571;
  }

  .loading-map .el-loading-mask {
    z-index: 1 !important;
  }

  .card-tabs {
    :deep(.el-tabs) {
      &__item:not(.is-active) {
        color: #fff !important;
      }
    }
  }

  .inputSteel {
    position: relative;
    z-index: 10;
  }

  .inputPosition {
    right: 1rem;
    position: absolute;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    flex: 1;

    :deep(.el-pagination) {
      .el-pagination__sizes .el-select {
        width: 8rem;
      }

      /* 箭头按钮样式 */
      .btn-next,
      .btn-prev {
        color: #fff;
        background-color: transparent !important;
      }

      .el-pagination__total,
      .el-pagination__goto {
        color: #fff;
        margin-right: 1rem;
      }

      .el-pagination__classifier,
      .el-input__inner,
      .el-select__selected-item,
      .el-select__caret {
        color: #fff;
      }
    }
  }

  .resource-table-container {
    height: 55vh;
    width: 100%;
    overflow-x: auto;

    :deep(.el-table) {
      height: 50vh;
      overflow: hidden;
      overflow-y: auto;
      width: 100%;
      z-index: 1;
    }
  }

  .el-table__fixed .warning-row td {
    background-color: #966 !important;
  }

  :deep(.el-table .warning-row td) {
    background-color: #966 !important;
    color: #fff !important;
  }
</style>
